Fix overflow-x on AppContent #88
Conversation
|
Thanks for the video examples. I just tested it out, and everything works fine with that overflow class. Approved 👍 |
tnylea
added
Approved
|
Hey @filip-codes, On second thought, I feel that this PR, #90, will be better suited to handling tables and other UI elements that have a large width. Can you let me know if adding the Thanks! |
|
Hey @tnylea, thanks for your response! I’ve looked into #90, which fixes the max-width issue on the sidebar when variant="inset". This PR addresses a different issue: when scrolling horizontally, the header disappears behind the navigation bar due to overflow-x. I tried setting |
|
Here's the result with Screen.Recording.2025-03-31.at.22.39.01.movPlease compare it with the "After" results above. (The header does not move) |
|
Thanks for letting me know @filip-codes, I'm trying to replicate the overflow issue, but I'm not able to. Can you give me the steps to possibly replicate. I've changed the sidebar to variat of sidebar, but I'm still not seeing that overflow issue.
Appreciate it. |
There was a problem hiding this comment.
@tnylea Sure! It is easy to reproduce. Just append the class min-w-[2000px] in line 18 in dashboard.tsx.
This PR fixes all overflow errors for people like me, copying the dashboard.tsx file as a template to create additional pages.
An example would be to use a shadcn table. If the table width goes beyond the browser width, you would have to scroll. When scrolling, the header is not fixed (like in the videos mentioned above).
Reason for the PR
In every new project, I make a small but essential change: I set
overflow-x-hiddenonAppContent.Why?
Components like
shadcn/tablecan cause unexpected horizontal scrolling on dashboard.tsx. To ensure a smoother experience, I want only the AppContent to be scrollable—without affecting the entire layout.Before (Desktop)
Screen.Recording.2025-03-22.at.20.57.13.mov
After (Desktop)
Screen.Recording.2025-03-22.at.20.55.05.mov
Before (Mobile)
Screen.Recording.2025-03-22.at.20.58.51.mov
After (Mobile)
Screen.Recording.2025-03-22.at.21.00.07.mov